<template>
  <div class="home">
    <el-button type="primary" @click="getData">测试按钮</el-button>
    <!-- 对话框 -->
    <TodoDialog
      :dialogTitle="dialogTitle"
      :visible.sync="dialogVisible"
      @updateVisible="updateVisible"
      @resetPopupData="resetPopupData"
      @submitPopupData="submitPopupData"
      @handleClose="handleClose"
      :popupWidth="'550px'"
    ></TodoDialog>
    <div id="header">#header</div>
    <div id="container">
      <div id="left" class="column">#left</div>
      <div id="center" class="column">#center</div>
      <div id="right" class="column">#right</div>
    </div>
    <div id="footer">#footer</div>
  </div>
</template>

<script>
import { getSems } from "@/api/index";
import TodoDialog from "@/components/TodoDialog/index.vue";
export default {
  name: "Home",
  components: { TodoDialog },
  data() {
    return {
      dialogVisible: false, // 弹框的出现与否
      dialogTitle: "通过", // 标题
    };
  },
  created() {
    console.log(process.env.VUE_APP_FLAG), "ppppp";
  },
  methods: {
    async getData() {
      let params = {
        username: "2236001007@qq.com",
        module: "register",
      };
      const data = await getSems(params);
      console.log(data.data);
      this.dialogVisible = true;
      // https://www.cnblogs.com/mysteryguest/p/electron3_vue-cli3_build.html#_label0
    },
    // 修改是否让页面显示与隐藏的事件
    updateVisible(val) {
      this.dialogVisible = val;
    },
    // 点击取消的事件
    resetPopupData() {
      //  这里可重置数据
      this.dialogVisible = false;
    },
    // 点击确定的按钮
    async submitPopupData() {
      this.dialogVisible = false;
    },
    // 关闭弹框（头部的X）
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  min-width: 550px;
  font-weight: bold;
  font-size: 20px;
  // 自适应当前视图高度vh
  height: 100vh;
}
#header,
#footer {
  background: rgba(29, 27, 27, 0.726);
  text-align: center;
  height: 60px;
  line-height: 60px;
  color: $success;
}
#container {
  display: flex;
}
#container .column {
  text-align: center;
  height: 300px;
  line-height: 300px;
}
#center {
  flex: 1;
  background: rgb(206, 201, 201);
}
#left {
  width: 200px;
  background: rgba(95, 179, 235, 0.972);
}
#right {
  width: 200px;
  background: rgb(231, 105, 2);
}
</style>
